<template>
  <div class="seller-baseInfo">
    <div class="baseInfo">
      <item-title title="基本信息" />
      <el-form
        v-if="data"
        class="form-detailData"
        label-position="right"
        label-width="140px"
        inline
        :model="data"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="商销客户编号：">
              <div>{{ data.sellerNumber || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商销客户名称：">
              <div>{{ data.sellerName || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码：">
              <div>{{ data.creditCode || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="企业所在地区：">
              <div>{{ data.provinceName }} / {{ data.cityName }} / {{ data.areaName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人：">
              <div>{{ data.userName || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话：">
              <div>{{ data.tel || '无' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="详细地址：">
              <div>{{ data.address || '无' }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="cert-info">
      <item-title title="资质信息" />
      <div class="certList">
        <filesUploadView
          ref="refFile"
          :list="data?.files"
          disabled
        />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'

export default defineComponent({
  props: {
    id: {
      type: Number,
      default: 0,
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    const api = inject('api')
    var reactiveData = reactive({
      data: props.detail,
    })
    const getDetail = (id) => {
      api.shangPin.SHANGPIN_DETAILS(id).then((res) => {
        if (res.code === 0) {
          reactiveData.data = res.data.data
        }
      })
    }
    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          getDetail(newval)
        }
      },
      { immediate: true, deep: true }
    )
    watch(
      () => props.detail,
      (newval, oldval) => {
        if (newval) {
          reactiveData.data = newval
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(reactiveData),
    }
  },
})
</script>

<style lang="scss" scoped>
.certList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
</style>

